<template>
	<view>
		<view class="content_item_out">
			<view class="content_item_out_left">
				体重单位
			</view>
			<view class="content_item_out_right">
				<picker @change="changeUnit" :value="name" range-key="name" :range="unitList">
					<view class="unit_picker_inner">{{formData.unit}}</view>
				</picker>
			</view>
		</view>


		<view class="location_upload_out">
			<!--  下划线  -->
			<view class="bottom_line"></view>
		</view>

		<view class="content_item_out">
			<view class="content_item_out_left">
				目标体重
			</view>
			<input class="item_input" :value="formData.goalWeight" @input="changeGoalWeight"
				placeholder-class="placeholder_class" placeholder="请输入减肥的目标,如:102" />
		</view>

		<view class="location_upload_out">
			<!--  下划线  -->
			<view class="bottom_line"></view>
		</view>

		<view class="content_item_out">
			<view class="content_item_out_left">
				身高
			</view>
			<input class="item_input" v-model="formData.stature" placeholder-class="placeholder_class"
				placeholder="请输入身高(厘米),如:182" />
		</view>
		<!--  提交按钮  -->
		<view class="submit" @click="submit">提交</view>
	</view>
</template>

<script>
	import {
		addConfigApi,
		updateUnitApi,
		findConfigApi
	} from '../../../api/configApi.js'
	import {
		verifyPostNumber
	} from '@/utils/verifyUtil.js'
	import toastUtil from '@/utils/toastUtil.js'
	import storageUtil from '@/utils/storageUtil.js'
	import configUtil from '../../../utils/config/configUtil.js'

	const app = getApp()
	export default {
		data() {
			return {
				// 顶部导航栏高度
				topNavigationHeight: app.globalData.topNavigationHeight,
				// 表单数据
				formData: {
					_id: null,
					// openid
					openId: '',
					// 体重单位
					unit: '',
					// 目标体重
					goalWeight: '',
					// 身高
					stature: ''
				},
				// 单位集合
				unitList: [{
					name: '公斤',
					value: '公斤'
				}, {
					name: '斤',
					value: '斤'
				}],
				// 单位下标
				unitIndex: 0,
				// 是否提交中
				submitFlag: false
			}
		},
		onLoad(option) {
			console.log('onLoad..........')
			this.getConfig()
		},
		onHide() {},
		onUnload() {},
		methods: {
			// 修改体重配置
			changeUnit(e) {
				console.log(e)
				let index = e.detail.value
				console.log(index)
				let value = this.unitList[index].name
				console.log(value)
				this.formData.unit = value
				console.log(this.formData)
			},
			// 提交
			submit() {
				let formData = this.formData
				// 校验
				if (formData.goalWeight && !verifyPostNumber(formData.goalWeight)) {
					toastUtil.showToast('请输入合法的目标体重，仅支持正数')
					return
				}
				// 校验
				if (formData.stature && !verifyPostNumber(formData.stature)) {
					toastUtil.showToast('请输入合法的身高，仅支持正数')
					return
				}
				if (formData.goalWeight) {
					formData.goalWeight = parseFloat(formData.goalWeight)
				}
				if (formData.stature) {
					formData.stature = parseFloat(formData.stature)
				}

				formData.openId = storageUtil.getOpenId()
				configUtil.updateConfig(formData).then((data) => {
					console.log('success data : ', data)
					// 添加成功
					if (data.result.errCode === 0) {
						toastUtil.showToast('修改配置成功')
						uni.navigateBack({
							delta: 1
						})
						return
					}
				}, (data) => {
					console.log('reject data : ', data)
					toastUtil.showToast('修改配置失败')
				})
			},
			/**
			 * 查询配置
			 */
			getConfig() {
				toastUtil.showLoading()
				configUtil.getConfig().then((res) => {
					console.log('getConfig : ', res)
					// 查询成功
					let data = res
					// 查完了
					if (!data) {
						toastUtil.showToast("找不到用户配置，请重启小程序试试!")
						return
					}
					this.formData = data
				}, (data) => {
					console.log('reject data : ', data)
					toastUtil.showToast(res.errMsg)
				}).finally(() => {
					toastUtil.hideLoading()
				})
			},

			/*
				修改目标体重
			*/
			changeGoalWeight(e) {
				console.log(e)
				let value = e.detail.value
				this.formData.goalWeight = value
			}
		}
	}
</script>

<style>
	page {
		color: rgb(173, 178, 188);
		background-color: rgb(244, 245, 246);
	}

	/*  内容  */
	.content {
		position: relative;
		background-color: white;
		width: calc(100% - 20rpx);
		height: 500rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		padding-top: 10rpx;
		padding-bottom: 50rpx;
		margin-bottom: 20rpx;
		color: black;
	}

	/*  placeholder 样式类  */
	.placeholder_class {
		color: rgb(173, 178, 188);
	}

	/*  底部线条  */
	.bottom_line {
		height: 4rpx;
		width: 90%;
		margin-left: 5%;
		background-color: rgb(244, 245, 246);
	}

	.phone_name_out {
		background-color: white;
	}

	/*  输入框 外部  */
	.input_out {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: calc(100% - 20rpx);
		background-color: white;
	}

	/*  输入框左边  */
	.input_left {
		width: 40rpx;
		margin-left: 30rpx;
		height: 40rpx;
	}

	/*  输入框  */
	.input_right {
		width: calc(100% - 100rpx);
		color: black;
	}

	/*  内容标题  */
	.content_title_out {
		padding-left: 20rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70rpx;
	}

	/*  内容标题  左边*/
	.content_title_left {
		font-size: medium;
		font-weight: bold;
		color: rgb(50, 50, 50);
	}

	/*  内容标题 右边  */
	.content_title_right {
		display: flex;
		align-items: center;
		height: 100%;
	}

	/*  内容标题  右边*/
	.content_title_add_line {
		margin-right: 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		text-align: center;
		width: 120rpx;
		color: white;
		background-color: rgb(71, 159, 255);
		border-radius: 10rpx;
	}

	/*  内容项 外部  */
	.content_item_out {
		display: flex;
		align-items: center;
		height: 90rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: calc(100% - 20rpx);
		background-color: white;
	}

	/*  输入框  */
	.content_item_out_left {
		width: 150rpx;
		color: black;
		padding-right: 10rpx;
		text-align: center;
	}

	.content_item_out_right {
		width: calc(100% - 150rpx);
	}

	.item_input {
		width: calc(100% - 150rpx - 20rpx - 20rpx);
		border-radius: 10rpx;
		border: 2rpx solid gray;
		padding-left: 20rpx;
	}

	/*  选择框里面  */
	.unit_picker_inner {
		padding-left: 20rpx;
		width: 100%;
	}

	/*  诗句项 图标  */
	.content_item_out_img {
		margin-left: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}


	/*  提交  */
	.submit {
		height: 80rpx;
		line-height: 80rpx;
		width: 90%;
		background-color: rgb(71, 159, 255);
		background: -webkit-linear-gradient(top, rgb(99, 200, 251), rgb(49, 165, 245));
		margin-left: 5%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		border-radius: 10rpx;
		margin-top: 60rpx;
	}



	/*  蓝色字体  */
	.blue_text {
		color: rgb(49, 165, 245);
	}

	.text_black {
		color: black;
	}

	/*  分享  */
	.share_switch {
		margin-top: 50rpx;
		margin-left: 20rpx;
		margin-bottom: 60rpx;
	}

	/*  分享 左边  */
	.share_switch_left {
		color: black;
		margin-right: 20rpx;
	}
</style>